<template>
  <!--分配角色-->
  <div class='search'>
    <a-form-model :model='form' ref='userRole'>
      <a-form-model-item>
        <a-select v-model='form.tenantId' placeholder='请选择租户' style='width:96%' @change='tenantChange'>
          <a-select-option :value='item.tenantId' :key='index' v-for='(item,index) in tenantList'>
            {{ item.tenantName }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item prop='roleIds'>
        <a-transfer
          :dataSource='roleList'
          v-model='form.roleIds'
          :listStyle="{width: '45%',height: '480px'}"
          :titles="['选择角色', '已选择角色']"
          :render='item=>item.title'
          :target-keys='form.roleIds'
          @change='handleTransferChange'
          filterable>
        </a-transfer>
      </a-form-model-item>
    </a-form-model>

  </div>
</template>

<script>
export default {
  name: "userRole",
  props: {},
  data() {
    return {
      roleList: [],
      tenantList: [],
      form: {
        userId: "",
        roleIds: []
      }
    }
  },
  methods: {
    setData(data) {
      if (data && data.userId) {
        this.form.userId = data.userId
        this.form.organizationId = data.organizationId
        this.getTenantList()
        this.getAuthRoleList(data.userId, data.organizationId)
      }
    },
    handleSubmit() {
      if(this.form.tenantId){
        this.$refs["userRole"].validate(valid => {
          if (valid) {
            this.http.post(this, {
              url: this.api.managerUser.setRole,
              data: {
                userId: this.form.userId,
                tenantId:this.form.tenantId,
                roleIds: this.form.roleIds.join(",")
              },
              success: function(me) {
                //me.$emit("handleClose")
              }
            })
          } else {
            return false
          }
        })
      }else{
        this.$message.error('请选择租户')
      }
    },
    handleTransferChange(targetKeys, direction, moveKeys) {
      this.form.roleIds = targetKeys
    },
    getTenantList() {
      this.http.get(this, {
        url: this.api.tenant.list,
        data: {},
        success: (me, data) => {
          me.tenantList = data

        }
      })
    },
    tenantChange(value) {
      this.getAuthRoleList(this.form.userId, value)
    },
    getAuthRoleList(userId, tenantId) {
      this.http.get(this, {
        url: this.api.role.getAuthRoleList,
        data: {
          tenantId: tenantId,
          userId: userId
        },
        success: (me, data) => {
          data.roleList.map(item => {
            item.key = item.roleId
            item.title = item.roleName
          })
          me.roleList = data.roleList
          me.form.roleIds = data.roleIds
        }
      })
    }
  },
  created() {

  },
  components: {}
}
</script>

<style scoped lang='less' rel='stylesheet/less'>

</style>
